<template>
  <div>
    <div class="sps" >

      <el-form ref="form" :model="user" :rules="rules" label-width="1px">

        <div class="head" style="border-left: 4px solid #39a9ff;padding-left: 8px;line-height: initial;font-size: initial;text-align: left;">
          <h1>思想政治</h1>
        </div>
        <div class="left">
          <el-form-item v-for="(user,statementId) in userList" :key="statementId" prop="statement">
            时间
            <el-date-picker class="test3" value-format="d" format="yyyy-MM-dd" v-model="user.date" type="date" placeholder="选择年月日"></el-date-picker>
            地点
            <el-input class="test3" v-model="user.spot" placeholder="输入地点" prop="spot"></el-input>
            活动级别
            <el-input class="test3" v-model="user.level" placeholder="输入活动级别"></el-input>
            角色
            <el-input class="test3" v-model="user.role"  placeholder="输入角色"></el-input>
            活动名称
            <el-input class="test3" v-model="user.name"  placeholder="输入活动名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-plus"
              @click="addModule()"
              >添加条目
            </el-button>
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              @click="deleteModule()"
              >删除条目
            </el-button>
          </el-form-item>
        </div>

        <div class="head" style="border-left: 4px solid #39a9ff;padding-left: 8px;line-height: initial;font-size: initial;text-align: left;">
          <h1>行为规范</h1>
        </div>
        <div class="left">
          <el-form-item  prop="behaviour">
            <el-input v-model="user.behaviour" placeholder="注：不超过100字"></el-input>
          </el-form-item>
        </div>

        <div class="head" style="border-left: 4px solid #39a9ff;padding-left: 8px;line-height: initial;font-size: initial;text-align: left;">
          <h1>学习态度</h1>
        </div>
        <div class="left">
          <el-form-item  prop="study">
            <el-input v-model="user.study" placeholder="注：不超过100字"></el-input>
          </el-form-item>
        </div>

        <div class="head" style="border-left: 4px solid #39a9ff;padding-left: 8px;line-height: initial;font-size: initial;text-align: left;">
          <h1>身体健康</h1>
        </div>
        <div class="left">
          <el-form-item  prop="health">
            <el-input v-model="user.health" placeholder="注：不超过100字"></el-input>
          </el-form-item>
        </div>

        <div>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>

import { getInfo } from '@/api/login.js';
import { updateSPSinfo } from "@/api/login";
export default {

  name: "update",
  data() {
    return {
      userList:[],
      user: {
        username:"",
        statementId: "",
        date:"",
        spot:"",
        level:"",
        role:"",
        name:"",
        behaviour:"",
        study:"",
        health:""
      },

      rules: {
        spot: [{ required: true, message: "请输入地点", trigger: "blur" }],
        level: [{ required: true, message: "请输入活动级别", trigger: "blur" }],
        role: [{ required: true, message: "请输入角色", trigger: "blur" }],
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        behaviour: [{ required: true, message: "请输入行为规范", trigger: "blur" }],
        study: [{ required: true, message: "请输入学习态度", trigger: "blur" }],
        health: [{ required: true, message: "请输入身体健康", trigger: "blur" }],
      },
    };
  },
  mounted() {
    getInfo().then((res) => {
      this.user.username = res.data.username;
    });
  },
  methods: {
    addModule() {
      this.user = {};
      this.userList.push(this.user);
    },
    deleteModule(user) {
      var index = this.userList.indexOf(user); //找到对应图标的下标
      this.userList.splice(this.userList.length - 1, 1);
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          //发起网络请求登录，如果登录成功，跳转到主页面
          //操作与login api联系
          updateSPSinfo(this.user.username,this.user.serviceId,this.user.date,this.user.workname,
              this.user.job,this.user.level,this.user.behaviour,this.user.study,this.user.health).then(res =>{
            console.log(res.data.accessToken)
            setToken(res.data.accessToken)
          }).catch(() => {
            // 上传，
            this.loading = true
          })
        }
      })
    },

  },
};
</script>

<style>
.update {
  padding: 20px;
}

.head{
  margin-left: 10px;
}

.test3{
  width: 150px !important;
}
.left{
  text-align: left;
  margin-left: 100px;
  margin-right: 50px;
}

.right{
  text-align: right;
  margin-right: 100px;
}
</style>